<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>人脸识别登录|Test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">

    <div class="main-content">
        <div class="main-content-inner">

            <div class="page-content">

                <div style="padding: 10px;">
                    <tr>
                        <td colspan="2">
                            <button class="btn btn-sm btn-default" onclick="openMedia()">开启摄像头</button>
                            <button class="btn btn-sm btn-default" onclick="closeMedia()">关闭摄像头</button>
                            <button class="btn btn-sm btn-default" onclick="takePhoto()">登录</button>
                                <li>
                                    <i class="ace-icon fa fa-home home-icon"></i>
                                    <a href="http://jimo.fun/">JIMO|首页</a>
                                </li>
                                <li>
                                    <a href="/in">人脸-录入库Test</a>
                                </li>
                        </td>
                    </tr>
                    <table>
                        <tr>
                            <td>
                                <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
                                <canvas id="canvas" width="500px" height="500px" style="display: none"></canvas>
                            </td>
                            <td>
                                <img id="imgTag" src="" alt="..." width="500px" height="500px"><br>
                            </td>
                        </tr>
                    </table>

                    <script>
                        let mediaStreamTrack=null; // 视频对象(全局)
                        let video ;
                        function openMedia() {
                            let constraints = {
                                video: { width: 500, height: 500 },
                                audio: false
                            };
                            //获得video摄像头
                            video = document.getElementById('video');
                            let promise = navigator.mediaDevices.getUserMedia(constraints);
                            promise.then((mediaStream) => {
                                // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                                mediaStreamTrack=mediaStream.getVideoTracks()
                                video.srcObject = mediaStream;
                                video.play();
                            });
                        }

                        // 拍照
                        function takePhoto() {
                            //获得Canvas对象
                            let video = document.getElementById('video');
                            let canvas = document.getElementById('canvas');
                            let ctx = canvas.getContext('2d');
                            ctx.drawImage(video, 0, 0, 500, 500);


                            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
                            let img = document.getElementById('canvas').toDataURL();
                            // 这里的img就是得到的图片
                            console.log('img-----', img);
                            document.getElementById('imgTag').src=img;
                            //上传
                            $.ajax({
                                url:"/admin/face/login",
                                type:"POST",
                                data:{"imgData":img},
                                dataType: "json",
                                success:function(data){
                                    var b = data.success;
                                    alert(b);
                                    if (b) {
                                        alert("FaceSet库中比对该face存在，恭喜您登录成功！");
                                    } else {
                                        alert("登录失败，请先录入人脸到FaceSet！");
                                    }

                                }
                                ,error:function(){
                                    alert("登录失败，系统异常请联系管理员JIMO！")
                                }
                            });

                        }

                        // 关闭摄像头
                        function closeMedia() {
                            let stream = document.getElementById('video').srcObject;
                            let tracks = stream.getTracks();

                            tracks.forEach(function(track) {
                                track.stop();
                            });

                            document.getElementById('video').srcObject = null;
                        }
                    </script>
                </div>

            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->

</div><!-- /.main-container -->

</body>
</html>
